<script setup>
import { defineProps } from 'vue';
const imgDefultUrl = 'https://www.philhar.cn/upload/swiper/'

const props = defineProps(['companys']);

</script>

<template>
  <div class="container-bottom">
    <div class="container-bottom-item">
      <div class="guanyu-womin-box">
        <div style="font-size: 1.875rem;color: rgba(250, 249, 245, 1);font-weight: 500;">关于我们</div>
        <div style="font-size: 1.5rem;color: rgba(250, 249, 245, 1);font-weight: 300;margin-top: 2.1875rem">公司介绍</div>
        <div style="font-size: 1.5rem;color: rgba(250, 249, 245, 1);font-weight: 300;margin-top: 2.1875rem">公司优势</div>
        <div style="font-size: 1.5rem;color: rgba(250, 249, 245, 1);font-weight: 300;margin-top: 2.1875rem">公司优势</div>
      </div>
      <div class="guanyu-womin-box-two">
        <div style="font-size: 1.875rem;color: rgba(250, 249, 245, 1);font-weight: 500;">业务服务</div>
        <div style="font-size: 1.5rem;color: rgba(250, 249, 245, 1);font-weight: 300;margin-top: 2.1875rem">预约量房</div>
        <div style="font-size: 1.5rem;color: rgba(250, 249, 245, 1);font-weight: 300;margin-top: 2.1875rem">预约设计</div>
        <div style="font-size: 1.5rem;color: rgba(250, 249, 245, 1);font-weight: 300;margin-top: 2.1875rem">参观工地</div>
        <div style="font-size: 1.5rem;color: rgba(250, 249, 245, 1);font-weight: 300;margin-top: 2.1875rem">预约到店</div>
      </div>
      <div class="guanyu-womin-box">
        <div style="font-size: 1.875rem;color: rgba(250, 249, 245, 1);font-weight: 500;">售后服务</div>
        <div style="font-size: 1.5rem;color: rgba(250, 249, 245, 1);font-weight: 300;margin-top: 2.1875rem">业主维修</div>
        <div style="font-size: 1.5rem;color: rgba(250, 249, 245, 1);font-weight: 300;margin-top: 2.1875rem">售后保障</div>
        <div style="font-size: 1.5rem;color: rgba(250, 249, 245, 1);font-weight: 300;margin-top: 2.1875rem">投诉建议</div>
      </div>
      <div class="bottom-logo">
        <img :src="imgDefultUrl + props.companys.company_logo">

      </div>
      <div class="bottom-email-box">
        <div style="font-size: 2rem;color: rgba(250, 249, 245, 1);font-weight: 500;">联系方式</div>
        <div style="font-size: 2rem;color: white;margin-top: 2.1875rem">电话：{{ props.companys.company_tel }}</div>
        <div style="color: white;font-size: 2rem;margin-top: 2.1875rem">邮箱：{{ props.companys.company_email }}</div>
        <div style="color: white;font-size: 1.5rem;font-weight: 400;margin-top: 2.1875rem">{{
          props.companys.company_address }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.app {
  width: 12.5rem;
}

.container-bottom {
  width: 100%;
  height: 30.25rem;
  background: rgba(56, 56, 56, 1);
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  .container-bottom-item {
    // margin-top: 6.1875rem;
    width: 100%;
    background: rgba(56, 56, 56, 1);
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .guanyu-womin-box {
      width: 8rem;
      height: 18.125rem;
      color: white;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .guanyu-womin-box-two {
      width: 8rem;
      height: 18.125rem;
      color: white;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .bottom-logo {
      width: 23.1919rem;
      height: 6.5rem;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .bottom-email-box {
      letter-spacing: .0625rem;
      width: 31.1875rem;
      height: 18.125rem;
      display: flex;
      flex-direction: column;
    }
  }


}
</style>